<template>
	<view class="body-view">
		<!--   搜索框 功能 -->
		<view class="search-box">
			<uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入工单流水号" clearButton="auto" bgColor="#ffffff"
				cancelButton="auto" @input="input" />
		</view>	
		<!-- <view style="width: 100%; height: 5px; background-color: #e5e5e5;"></view> -->
			<scroll-view class="top-menu-view" scroll-x="true" :scroll-left="scrollLeft" enable-flex="true" v-if="!show">
				<block v-for="(menuTab,index) in menuTabs" :key="index">
					<view class="menu-one-view" v-bind:id="'tabNum'+index" @click="swichMenu(index)">
						<view :class="[currentTab==index ? 'menu-one-act' : 'menu-one']">
							<view class="menu-one-txt">{{menuTab.name}}</view>
							<view class="menu-one-bottom">
								<view class="menu-one-bottom-color"></view>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
			<swiper :current="currentTab" class="swiper-box-list" duration="300" @change="swiperChange" >
				<block v-for="(swiperDate,index1) in swiperDateList" :key="index1">
					<swiper-item>
						<scroll-view class="swiper-one-list" scroll-y="true" @scrolltolower="loadMore(index1)"  enable-flex="true">
							<!-- <block v-for="(swiperDate2,index2) in swiperDate" :key="index2"> -->
								<view class="swiper-list-entity">
									<!--   列表   -->
									<view class="index">
											<view class="new_box" style="margin-top: 20upx;">
												<view class="bbox">
													<view class="list-box" v-for="(item,index) in list" :key="index">
														<view class="list-ed" @click="choiceList(item.workid)">
															<!-- <image class="list-img" :src="item.detailspath" mode="aspectFill"></image> -->
															<view class="list-right">
																<view class="list-name">
																	<view><text>流水号：{{item.workordernumber}}</text></view>
																	<view style="margin-left: 28%; color: coral; font-weight: bold;" v-if="item.disposalPlan == null || item.disposalPlan == ''">
																		<text>未下推</text></view>
																	<view style="margin-left: 28%; color: royalblue; font-weight: bold;" v-else ><text>已下推</text></view>
																	</view>
																<view class="list-da">
																	<view>客户：<text>{{item.customername}}</text></view>
																	<view>联系方式：<text>{{item.customerphone}}</text></view>
																</view>
																<!-- <view style="padding-top: 8px; color :darkgray">故障描述： -->
																<text class="text">故障描述：{{item.problemdescription}}</text>
																<!-- </view> -->
															</view>
														</view>
														<!-- 分隔 -->
													<!-- <view style="height: 1px;background-color: #e1e1e1;width: 100%; position: relative;top: 0px;"></view> -->
													</view>
													<!-- <view class="sure" @click="sure">确认</view> -->	
												</view>
											</view>
										</view>
									<!-- <view>123</view> -->
								</view>
							<!-- </block> -->
						</scroll-view>
					</swiper-item>
				</block>
			<template v-if="empty==0">
				<u-empty
					textSize = '15'
					mode = "data"
					icon = "http://121.5.128.59:9000/picture/cbbd3de693b44e84afe2593f449acbb6.png"
				>
				</u-empty>
			</template>
			</swiper>
			<u-gap height="45px" bgColor="#ffffff "></u-gap>  <!--与底部导航栏风隔-->
			<userTab selectedIndex = 0></userTab>	<!-- 底部导航栏  -->
	</view>
</template>
 
<script>
	let search2;
	export default {
		data() {
			return {
				search:'',
				show: false,
				
				scrollLeft: 0,
				isClickChange: false,
				currentTab: 0,
				
				menuTabs: [{
					name: '未完成'
				}, {
					name: '已完成'
				}],
				swiperDateList: [[],[],[],[],[],[]],  
				// 列表 
				list: [],
				selectId:[],
				now: '',
				empty: 0,
			}
		},
		onLoad() {
			this.list=[];
			if (this.now ==1 ) {
				uni.request({
					method: 'GET',
					url: 'https://www.smacaftersales.com:443/workOrder/workOrder/findOrderStatus',
					data:{
						status: '已完成'
					},
					header: {
						"Content-Type": "application/json" //请求头信息
					},
					success: (res) => {
						console.lo
						if (res.data.data.length != 0) {
								this.empty = 1
							for (var i = 0; i < res.data.data.length; i++) {
								this.list.push(res.data.data[i])
							}		
						} else{
							this.empty = 0
						}		
					},
					fail:()=>{ 
						console.log("------失败")
					}
				})
				
			} else{
				uni.request({
				method: 'GET',
				url: 'https://www.smacaftersales.com:443/workOrder/workOrder/findOrderStatus',
				data:{
					status: '未完成'
				},
				header: {
					"Content-Type": "application/json"
				},
				success: (res) => { 	
					console.log("--------wei完成00000------------",res)
					if (res.data.data.length != 0) {
							this.empty = 1
						for (var i = 0; i < res.data.data.length; i++) {
							this.list.push(res.data.data[i])
						}		
					} else{
						this.empty = 0
					}		
				},
				fail:()=>{ //如果访问接口失败就会进入fail
					console.log("------失败")
				}
			})
			}
		},
		onShow() {
			//刷新界面
			//1. this.$router.go(0)  // 刷新当前界面
			//2. var pages = getCurrentPages(); //获取所有页面的数组对象
			// console.log(pages,"****** pages  *******")
			// var currPage = pages[pages.length - 1]; //当前页面
			// uni.redirectTo({
			//     url: currPage.__page__.fullPath
			//     })
		},
		
		computed:{
			
		},
		
		methods: {
				// 搜索
			input(e) {
				// 清除 timer 对应的延时器
				clearTimeout(this.timer)
				// 重新启动一个延时器，并把 timerId 赋值给 this.timer
				this.timer = setTimeout(() => {
					// 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值
					this.search = e; // 获取输入的搜索关键字
					console.log("--搜索---",this.search)
					if (this.search == '' || this.search == null) {
						this.show = false
						this.list=[];
						if (this.now ==1 ) {
							uni.request({
								method: 'GET',
								url: 'https://www.smacaftersales.com:443/workOrder/workOrder/findOrderStatus',
								data:{
									status: '已完成'
								},
								header: {
									"Content-Type": "application/json" //请求头信息
								},
								success: (res) => {
									if (res.data.data.length != 0) {
											this.empty = 1
										for (var i = 0; i < res.data.data.length; i++) {
											this.list.push(res.data.data[i])
										}		
									} else{
										this.empty = 0
									}		
								},
								fail:()=>{ 
									console.log("------失败")
								}
							})
							
						} else{
							uni.request({
							method: 'GET',
							url: 'https://www.smacaftersales.com:443/workOrder/workOrder/findOrderStatus',
							data:{
								status: '未完成'
							},
							header: {
								"Content-Type": "application/json"
							},
							success: (res) => { 		
								if (res.data.data.length != 0) {
										this.empty = 1
									for (var i = 0; i < res.data.data.length; i++) {
										this.list.push(res.data.data[i])
									}		
								} else{
									this.empty = 0
								}		
							},
							fail:()=>{ //如果访问接口失败就会进入fail
								console.log("------失败")
							}
						})
						}
					} else{
						search2 = this.search
						console.log(search2,'-----search2----')
						this.list = []
						this.show =  true
						uni.request({
							method: 'POST',
							url:'https://www.smacaftersales.com:443/workOrder/workOrder/getData',
							data:{
								workOrderNumber: search2
							},
							header: {
							  "Content-type": "application/x-www-form-urlencoded",
							},
							success: (res) => { //如果访问接口成功就会进入success
								this.list = [];
								// console.log("--ss--",res)
								if (res.data.data.length != 0) {
										this.empty = 1
									for (var i = 0; i < res.data.data.length; i++) {
										this.list.push(res.data.data[i])
									}		
								} else{
									this.empty = 0
								}
									
							},
						})
					}
				}, 1000)
			},
			
			choiceList(workid){  //  列表 选择
				let workid2 = workid;
				let data2 = { msg: workid2}
				uni.navigateTo({
					url: '/pages/adminVue/pushDown?data='+encodeURIComponent(JSON.stringify(data2))
				})
			},
			// *******
		swichMenu: async function(current) {
			
			this.now = current;
			if (current == 0) {
				uni.request({
					method: 'GET',
					url: 'https://www.smacaftersales.com:443/workOrder/workOrder/findOrderStatus',
					data:{
						status: '未完成'
					},
					header: {
						"Content-Type": "application/json" //请求头信息
					},
					success: (res) => { //如果访问接口成功就会进入success
						this.list = [];
						if (res.data.data.length != 0) {
								this.empty = 1
							for (var i = 0; i < res.data.data.length; i++) {
								this.list.push(res.data.data[i])
							}		
						} else{
							this.empty = 0
						}
							
					},
					fail:()=>{ //如果访问接口失败就会进入fail
						console.log("------失败")
					}
					
				})
			} else{
				uni.request({
					method: 'GET',
					url: 'https://www.smacaftersales.com:443/workOrder/workOrder/findOrderStatus',
					data:{
						status: '已完成'
					},
					header: {
						"Content-Type": "application/json" //请求头信息
					},
					success: (res) => { 
						this.list = [];
						if (res.data.data.length != 0) {
								this.empty = 1
							for (var i = 0; i < res.data.data.length; i++) {
								this.list.push(res.data.data[i])
							}		
						} else{
							this.empty = 0
						}
					},
					fail:()=>{ //如果访问接口失败就会进入fail
						console.log("------失败")
					}
					
				})
			}
			
			//点击其中一个 menu
			if (this.currentTab == current) {
				return false;
			} else {
				this.currentTab = current;
				this.setScrollLeft(current);
			}
		},
		swiperChange: async function(e) {
			let index = e.target.current;
			this.setScrollLeft(index);
			this.currentTab = index; 
			
		},
		setScrollLeft: async function(tabIndex) {
			let leftWidthSum = 0;
			for (var i = 0; i <= tabIndex; i++) {
				let nowElement = await this.getWidth('tabNum' + i);
				leftWidthSum = leftWidthSum + nowElement.width;
			}
			let winWidth = uni.getSystemInfoSync().windowWidth;
			this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
		},
		getWidth: function(id) { //得到元素的宽高
			return new Promise((res, rej) => {
				uni.createSelectorQuery().select("#" + id).fields({
					size: true,
					scrollOffset: true
				}, (data) => {
					res(data);
				}).exec();
			})
		},
		loadMore: function(tabIndex) {
			// console.log('正在加载更多数据。。。')
			this.getDateList(tabIndex);
		},
		getDateList: function(tabIndex) {
			for (var i = 0; i < 20; i++) {
				var entity = this.menuTabs[tabIndex].name + (this.swiperDateList[tabIndex].length);
				this.swiperDateList[tabIndex].push(entity);
			}						
		}
	},
	}
</script>
 
 
<style lang='scss'>
	
	page {
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			justify-content: center;
			background: rgba(245, 245, 245, 1.0);
		}
	 
	 .search-box{
		 width: 100%;
		 height: 50px;
	 }
	 
	 .text {
	 	padding-top: 10px;
		color: #959595;
	 	white-space: nowrap;
	 	overflow: hidden;
	 	text-overflow: ellipsis; 
	 	display: block;  
	 }
	 
	 .selde {
	 		border: 1px solid red;
	 		background: red;
	 		color: #FFFFFF;
	 		border-radius: 20upx;
	 		display: flex;
	 		flex-direction: row;
	 		justify-content: center;
	 		align-items: center;
	 		font-size: 20upx;
	 		padding: 0 10upx;
	 	}
	 
	 	.selde-q {
	 		width: 18upx;
	 		height: 18upx;
	 		border-radius: 50%;
	 		background: #FFFFFF;
	 		margin-left: 6upx;
	 	}
	 
	 	/* 未选择 */
	 	.noselde {
	 		border: 1px solid #959595;
	 		background: #FFFFFF;
	 		color: #959595;
	 		border-radius: 20upx;
	 		display: flex;
	 		flex-direction: row;
	 		justify-content: center;
	 		align-items: center;
	 		font-size: 20upx;
	 		padding: 0 10upx;
	 	}
	 
	 	.noselde-q {
	 		border: 1px solid #959595;
	 		width: 16upx;
	 		height: 16upx;
	 		border-radius: 50%;
	 		background: #FFFFFF;
	 		margin-left: 6upx;
	 	}
	 	.list-box {
	 		display: flex;
	 		flex-direction: column;
	 		background-color: #ffffff;
	 		margin: 0upx 16upx 10upx 16upx;  /* 上右下左 */
	 		padding: 10upx;
	 		border-radius: 15upx;
			/* border: 3rpx solid #6699FF; */
			height: 90px;
	 	}
	 
	 	.list-ed {
	 		display: flex;
	 		flex-direction: row;
	 		justify-content: center;
	 		align-items: center;
			
	 	}
	 
	 	.list-left {
	 		margin-right: 16upx;
	 	}
	 
	 	.list-img {
	 		width: 130upx;
	 		height: 130upx;
	 		margin: 5upx 16upx 0upx 0upx;
	 	}
	 
	 	.list-right {
	 		display: flex;
	 		flex-direction: column;
	 		width: 600upx;
	 		height: 180upx;
	 	}
	 
	 	.list-right-img {
	 		width: 140upx;
	 		height: 38upx;
	 	}
	 
	 	.noadsop {
	 		width: 120upx;
	 		height: 32upx;
	 	}
	 
	 	.list-head {
	 		display: flex;
	 		justify-content: flex-end;
	 		margin-bottom: 10upx;
	 	}
	 
	 	.list-name {
	 		overflow: hidden;
	 		text-overflow: ellipsis;
	 		display: flex;
	 		-webkit-box-orient: vertical;
	 		-webkit-line-clamp: 2;
	 		margin-bottom: 15upx;
			margin-top: 5upx;
			font-size: 30upx;
	 	}
	 
	 	.list-da {
	 		display: flex;
	 		flex-direction: row;
	 		font-size: 26upx;
			
	 	}
	 
	 	.list-da view {
	 		width: 50%;
	 	}
	 
	 	.list-da view text {
	 		color: red;
	 	}
	 
	 	.sure {
	 		background: #FF6000;
	 		color: #FFFFFF;
	 		width: 600upx;
	 		height: 70upx;
	 		display: flex;
	 		justify-content: center;
	 		align-items: center;
	 		border-radius: 40upx;
	 		margin: 60upx auto;
	 	}
	 /*  */
	 
	 
		.body-view {
			display: flex;
			flex: 1;
			flex-direction: column;
			overflow: hidden;
			height: 100%;
			width: 100%;
			align-items: flex-start;
			justify-content: center;
		}
	 
		.top-menu-view {
			display: flex;
			white-space: nowrap;
			width: 100%;
			background-color: #f5f5f5;
			height: 112upx;
			/* 在这里设置导航条高度 */
		}
	 
		.top-menu-view .menu-one-view {
			display: inline-block;
			white-space: nowrap;
			height: 100%;
		}
	 
		.top-menu-view .menu-one-view .menu-one {
			/* 在这里写 单个按钮样式 */
			margin-left: 25upx;
			margin-right: 25upx;
			position: relative;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	 
		.top-menu-view .menu-one-view .menu-one .menu-one-txt {
			height: 40upx;
			font-size: 28upx;
			font-weight: 400;
			color: rgba(154, 154, 154, 1);
			line-height: 40upx;
		}
	 
		.top-menu-view .menu-one-view .menu-one .menu-one-bottom {
			position: absolute;
			bottom: 0;
			width: 100%;
		}
	 
		.top-menu-view .menu-one-view .menu-one .menu-one-bottom .menu-one-bottom-color {
			width: 60%;
			height: 4upx;
		}
	 
		.top-menu-view .menu-one-view .menu-one-act {
			/* 在这里写 单个按钮样式 */
			margin-left: 25upx;
			margin-right: 25upx;
			position: relative;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	 
		.top-menu-view .menu-one-view .menu-one-act .menu-one-txt {
			height: 40upx;
			font-size: 28upx;
			font-weight: 400;
			color: rgba(0, 170, 255, 1);
			line-height: 40upx;
		}
	 
		.top-menu-view .menu-one-view .menu-one-act .menu-one-bottom {
			position: absolute;
			bottom: 0;
			width: 100%;
			display: flex;
			justify-content: center;
		}
	 
		.top-menu-view .menu-one-view .menu-one-act .menu-one-bottom .menu-one-bottom-color {
			width: 60%;
			height: 4upx;
			background: rgba(0, 170, 255, 1);
		}
	 
		.swiper-box-list {
			flex: 1;
			width: 100%;
			height: auto;
			background-color: #f5f5f5;
		}
	 
		.swiper-one-list {
			height: 100%;
			width: 100%;
		}
	 
		.swiper-one-list .swiper-list-entity {
			width: 100%;
			height: 112upx;
			text-align: center;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
		}
</style>